/* SPDX-License-Identifier: Apache-2.0 */

/*
  A pure HTML/CSS modal, with a background overlay.

  <div class="modal">
    <div class="modal__content" role="dialog">
      <a href="#modal-close" title="Close" class="modal__close">
        <i class="fa fa-times" aria-hidden="true"></i>
        <span class="sr-only">close</span>
      </a>
      <div class="modal__body">
        <h3 class="modal__title">Modal Title</h3>
        <!-- content, may include modal__form -->
      </div>
      <div class="modal__footer">
        <a href="#modal-close" class="button modal__action">Cancel</a>
        <button class="button button--primary modal__action">Action Button</button>
      </div>
    </div>
  </div>
*/

.modal {
  @include overlay;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  text-align: left;

  &:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  &__content {
    width: 400px;
    max-width: 90%;
    max-height: 90%;
    border-radius: 3px;
    overflow: auto;
    background: $white;
    position: relative;
    margin: auto;
  }

  &__body {
    padding: $spacing-unit;
  }

  @media screen and (max-width: $tablet) {
    &__body {
      padding: $half-spacing-unit;
    }
  }

  &__title {
    font-size: 1.5rem;
    padding-right: 20px; // Avoid overlap with close button
  }

  &__footer {
    border-top: 1px solid $border-color;
    padding: $half-spacing-unit;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  &__action {
    margin-left: 5px;
  }

  &__close {
    @include dismiss-button;
    color: $text-color;

    &:hover {
      color: $text-color;
    }
  }

  // Styles for inline forms
  &__form {
    label {
      font-weight: bold;

      input {
        width: auto;
        min-width: auto;
      }
    }

    input {
      width: 100%;
      min-width: 100%;
      margin: 5px 0 20px;
    }

    input:last-child {
      margin-bottom: 0;
    }

    .show-password,
    .show-password input {
      font-weight: normal;
      width: auto;
      margin: 0;
    }

    .inline-checkbox {
      // Resets width for checkboxes in modal
      width: auto;
      min-width: auto;
    }
  }

  &--wide {
    .modal__content {
      width: 850px;
    }
  }
}
